import { Button, LocalizationContext, ProgressBar } from "../../core";
import { FC, useContext } from "react";

interface PrintProgressProps {
  numLoadedPages: number;
  numPages: number;
  onCancel(): void;
}

const PrintProgress: FC<PrintProgressProps> = ({
  numLoadedPages,
  numPages,
  onCancel,
}) => {
  const l10n = useContext(LocalizationContext);
  const progress = Math.floor((numLoadedPages * 100) / numPages);

  return (
    <div className="rpv-print__progress">
      <div className="rpv-print__progress-body">
        <div className="rpv-print__progress-message">
          {l10n && l10n.print
            ? l10n.print.preparingDocument
            : "Preparing document ..."}
        </div>
        <div className="rpv-print__progress-bar">
          <ProgressBar progress={progress} />
        </div>
        <Button onClick={onCancel}>
          {l10n && l10n.print ? l10n.print.cancel : "Cancel"}
        </Button>
      </div>
    </div>
  );
};

export default PrintProgress;
